<template>
  <div class="container gray">
    <div class="tab">
      <ul class="tab_list">
        <li v-for="(item, index) in tabs" :key="index" class="tab_box" :class="isSelected===index?'selected':''" @click="handleChangeStyle(index)">
          <h3 class="tab_title">{{ item.label }}</h3>
          <p class="tab_info">{{ item.info }}</p>
        </li>
      </ul>
    </div>
    <div class="w">
      <cube-slide
        :data="homeList"
        :loop=false
        :auto-play=false
        :show-dots=false
        :initial-index="isSelected"
        ref="slide"
        :options="slideOptions"
        @scroll="onScroll"
        @change="onChange"
      >
        <cube-slide-item v-for="(item, index) in homeList" :key="index">
          <goods :item="item"></goods>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script>
import Goods from './goods'
import { mapGetters } from 'vuex'
export default {
  name: 'HomeTab',
  data () {
    return {
      // 初始化时选中对应的tab
      isSelected: 0,
      // 标题栏列表
      tabs: [
        {
          label: '全部',
          info: '精选好物'
        },
        {
          label: '时令尝鲜',
          info: '上新啦！'
        },
        {
          label: '早餐',
          info: '元气满满'
        },
        {
          label: '清爽一夏',
          info: '冰箱补给'
        }
      ],
      slideOptions: {
        listenScroll: true, // 是否监控scroll事件
        probeType: 3, // 0 不派发scroll事件，1：非实时；2：滑动过程中；3：不仅在屏幕滑动的过程中，而且momentum 滚动动画运行过程中实时派发
        directionLockThreshold: 0
      }
    }
  },
  computed: {
    // 内容列表(假数据)
    ...mapGetters(['homeList'])
  },
  components: {
    Goods
  },
  methods: {
    // silde 页面切换时触发change事件，返回当前的索引值,然后赋值给this.index
    // this.index改变的话，会触发selectedLabel重新计算，然后cube-tab就会进行新的计算，就可以成切换了
    onChange (current) {
      this.isSelected = current
    },
    onScroll (pos) {
      // cube-slide的scroll事件，滚动中实时派发，获取到滚动位置的坐标值
      // 滚动slide的时候，tab实时改变
      // 原理是：先获取slide的宽度，然后获取到滚动位置的坐标值pos.x，通过计算得到滚动页面的索引值
      // 获取到对应索引值上tab的元素位置减去tab_list宽度的一半，就可以将对应tab滑动到中间
      const slideWidth = this.$refs.slide.slide.scrollerWidth
      const index = Math.ceil((-pos.x / slideWidth) * 10 / 2)
      document.querySelector('.tab_list').scrollLeft = document.querySelectorAll('.tab_box')[index].offsetLeft - document.querySelector('.tab_list').clientWidth / 2
    },
    handleChangeStyle (index) {
      this.isSelected = index
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 2rem;
  .tab {
    overflow: hidden;
    padding: .2rem 0;
    .tab_list {
      display: flex;
      .tab_box {
        flex: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 1.6rem;
        color: #333;
        padding: 0 .4rem;
        border-right: 1px solid #eee;
        .tab_title {
          font-size: .64rem;
          font-weight: 700;
        }
        .tab_info {
          display: inline-block;
          height: .72rem;
          line-height: .72rem;
          font-size: .56rem;
          padding: 0 .24rem;
          border-radius: .36rem;
        }
      }
      .tab_box:last-child {
        border-right:0
      }
    }
  }
}
// 点击标题后的样式
.selected {
  .tab_title {
    color: rgb(255, 20, 147);
  }
  .tab_info {
    color: #fff;
    background-color: rgb(255, 20, 147);
  }
}
</style>
